<template>
	<view class="wrap">
		<view class="content u-font-lg">
			<view class="title">{{title}}</view>
			<view class="text">{{content}}</view>
		</view>
		<view class="icon" @click="$emit('click')">
			<u-image
				class="icon"
				width="60rpx" 
				height="60rpx"
				src="/static/icons/cancel_icon.png"></u-image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		content: {
			type: String,
			default: ''
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 548rpx;
		min-height: 329rpx;
		border-radius: 20rpx;
		background-color: $u-bg-white-color;
		padding: 30rpx;
		color: $u-text-color;
		.title {
			padding: 20rpx 0;
			font-weight: 600;
		}
		.text {
			line-height: 48rpx;
			letter-spacing: 4rpx;
		}
	}
	.icon {
		margin-top: 32rpx;
	}
}
</style>
